<template>
  <scroll-view class="scroll-view" scroll-y @scrolltolower="onscrolltolower">
    <Pageskeleton v-if="skeletonflag"></Pageskeleton>
    <view v-else class="guess">
      <view class="guess-item" v-for="item in guessList" :key="item.id">
        <view style="position: relative;">
            <view class="img-bg" :style="`--url:url('${item.img}')`"></view>
        </view>
        <view class="matron_text">
          <view class="matron_department">{{ item.title }}</view>
          <view class="text_grip" style="justify-content: flex-end;">
            <view class="matron_button"><a :href="item.url" style="color: aliceblue;text-decoration: none;">下载</a></view>
          </view>
        </view>
      </view>
    </view>

    <view class="loading-text">
      {{ pageParam.page_num >= pageParam.page_count ? '没有更多数据~' : '正在加载...' }}
    </view>
  </scroll-view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { http } from '@/utlis/http.ts'
import Pageskeleton from './components/Pageskeleton.vue'
const onscrolltolower = () => {
  if (pageParam.value.page_num < pageParam.value.page_count) {
    pageParam.value.page_num++
    uni.request({
      url: 'list/' + query.id + '/',

      data: pageParam.value,
      header: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      method: 'POST',
      sslVerify: true,
      success: ({ data, statusCode, header }) => {
        guessList.value.push(...data.list)
        pageParam.value.page_count = data.count
        skeletonflag.value = false
        scrollflag.value = false
      },
      fail: (error) => { }
    })


  }
  else {

  }
}
const skeletonflag = ref(false)
const loadingflag = ref(true)
const query = defineProps<{
  id: string,
  level: string
}>()
// console.log(query.level)
// uni.setNavigationBarTitle({ title: query.level })
const change = () => {
  uni.navigateBack({
    delta: 1
  })

}

import { onMounted, ref } from 'vue'
const { safeAreaInsets } = uni.getSystemInfoSync()

const pageParam = ref({
  page_num: 1,
  page_size: 8,
  page_count: 0
})

const guessList = ref([{
  title: "篮球裁判员职业道德和核心素养",
  img: 'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-03%20183759.png',
  url: 'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E7%AC%AC1%E8%AE%B2%EF%BC%9A%E7%AF%AE%E7%90%83%E8%A3%81%E5%88%A4%E5%91%98%E8%81%8C%E4%B8%9A%E9%81%93%E5%BE%B7%E5%92%8C%E6%A0%B8%E5%BF%83%E7%B4%A0%E5%85%BB.pdf'
},
{
  title:'杜东旭（违例+犯规',
  img:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-06%20001832.png',
  url:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E7%AC%AC3%E5%92%8C4%E8%AE%B2%EF%BC%9A%E6%9D%9C%E4%B8%9C%E6%97%AD%EF%BC%88%E8%BF%9D%E4%BE%8B%2B%E7%8A%AF%E8%A7%84%EF%BC%89.pdf',
},
{
  title:'杜东旭+三人制裁判法',
  img:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-06%20001844.png',
  url:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E7%AC%AC9%E8%AE%B2%EF%BC%9A%E6%9D%9C%E4%B8%9C%E6%97%AD%2B%E4%B8%89%E4%BA%BA%E5%88%B6%E8%A3%81%E5%88%A4%E6%B3%95.pdf'
},
{
  title:'篮球比赛记录台工作规范',
  img:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-06%20001854.png',
  url:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E7%AC%AC11%E8%AE%B2%EF%BC%9A%E7%AF%AE%E7%90%83%E6%AF%94%E8%B5%9B%E8%AE%B0%E5%BD%95%E5%8F%B0%E5%B7%A5%E4%BD%9C%E8%A7%84%E8%8C%83.pdf'
},
{
  title:'篮球三对三规则',
  img:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-06%20001904.png',
  url:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E7%AC%AC13%E8%AE%B2%EF%BC%9A%E7%AF%AE%E7%90%83%E4%B8%89%E5%AF%B9%E4%B8%89%E8%A7%84%E5%88%99.pdf'
},
{
  title:'小篮球规则课件',
  img:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-06%20001913.png',
  url:'https://test-1317540917.cos.ap-guangzhou.myqcloud.com/%E7%AC%AC14%E8%AE%B2%EF%BC%9A%E5%B0%8F%E7%AF%AE%E7%90%83%E8%A7%84%E5%88%99%E8%AF%BE%E4%BB%B6.pdf'
},
])
const download = (url)=>{
  uni.downloadFile({
    url: url,
    success: ({ tempFilePath, statusCode }) => {
      uni.showToast({
        title:"下载成功",
        icon:'success'
      })
    },
    fail: (error) => {
      uni.showToast({title:'下载失败'})
    }
  })
}




</script>





<style lang="scss">
:host {
  display: block;
}

/* 分类标题 */
.matron_text {
  display: flex;
  flex-wrap: wrap;
  margin: 4px;
  margin-top: 0px;
  margin-left: 6px;
  margin-right: 6px;

  .text_grip {
    display: flex;
    width: 100%;
    align-items: center;
    font-size: 14px;
    margin-bottom: 5px;

    .matron_name {
      margin-right: 3px;
    }

    .matron_price {
      color: #e14848;
      margin-right: 1px;
    }

    .matron_department {
      width: 100%;
      height: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .matron_button {
      height: 20px;
      width: 50px;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      border-radius: 3px;
      background-color: #24edc2;

    }

    .matron_label {
      height: 15px;
      width: 35px;
      margin: 5px;
      font-size: 10px;
      line-height: 15px;
      text-align: center;
      border-radius: 10%;
      margin: 2px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.3);
    }
  }
}

.caption {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  line-height: 1;
  padding: 36rpx 20rpx 40rpx;
  font-size: 35rpx;
  color: #fff;
  background-color: #24edc2;

  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 7%;

    &::before,
    &::after {
      content: '';
      width: 20rpx;
      height: 20rpx;
      background-image: url(@/static/images/bubble.png);
      background-size: contain;
      margin: 0 10rpx;
    }
  }

  .bt {

    position: absolute;
    left: 10px;
    transform: translateY(10px);

  }
}

/* 猜你喜欢 */
.guess {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .guess-item {
    width: 354rpx;
    margin: 5px;
    border-radius: 8rpx;
    overflow: hidden;
    background-color: #fff;
  }

  .image {
    width: 100%;
    height: 354rpx;
  }

  .img-bg {
    --url:url('https://imgapi.xl0408.top/index.php');
    width: 100%;
    height: 354rpx;
    background-position: center;
    background-size: cover;
    background-image: var(--url);


  }

  .name {
    height: 35rpx;
    margin: 10rpx 0;
    margin-right: 20px;
    font-size: 26rpx;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    line-height: 1;
    padding-top: 4rpx;
    color: #cf4444;
    font-size: 26rpx;
  }

  .small {
    font-size: 80%;
  }
}

.guess::after {
  content: ' ';
  width: 334rpx;
  flex-grow: 1;
}

// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}

page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.03);
}

.scroll-view {
  flex: 1;
  height: 100%;
}
</style>